import PropTypes from "prop-types"
import "@/assets/style.scss"

// <Button type="primary">确定</Button>
function Button(props) {
  let { type, children } = props;
  return (
    <div className="ml-button">
      <span className={type}>{children}</span>
    </div>
  )
}

Button.propTypes = {
  type: PropTypes.oneOf(['default', 'primary', 'danger', 'info']),
  children: PropTypes.node,
}

Button.defaultProps = {
  type: "default",
  children: '按钮',
}

function Modal(props) {
  // 在vue中，传递给儿子的数据通常是需要校验的
  // 在react中，通过prop-types进行校验
  let { title, closable, children } = props;
  return (
    <div className="ml-layer">
      <div className="ml-modal">
        <header>
          <div>
            <div>{title}</div>
            <div>{closable && "X"}</div>
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          <Button type="primary">确定</Button>
          <Button type="danger">取消</Button>
        </footer>
      </div>
    </div>
  )
}

// 对Modal中接收的prop进行数据类型校验
Modal.propTypes = {
  // title: PropTypes.number, // 期望传递过来的title是number类型
  // title: PropTypes.string, // 期望传递过来的title是string类型
  title: PropTypes.node, // 期待传递的title是jsx, string, number, und, null, bool
  closable: PropTypes.bool,
  children: PropTypes.node
}

// 给非必须项指定默认值
Modal.defaultProps = {
  title: "默认小标题",
  closable: true,
  children: <div>主体内容的默认值</div>
}

function DemoA() {
  return (
    <div>
      <button>open modal</button>
      <Modal closable title={<span style={{ color: "red" }}>删除用户</span>}>
        <div>
          <input type="text" />
          <div>你确定要添加此用户吗?</div>
        </div>
      </Modal>
    </div>
  )
}

export default DemoA;